{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录 - RBAC权限管理系统</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- FontAwesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        html, body {
            height: 100%;
        }
        
        body {
            background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
            min-height: 100vh;
            padding: 20px 0;
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            position: relative;
            overflow-x: hidden;
            display: flex;
            align-items: start;
            justify-content: center;
        }
        
        body::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            z-index: 0;
        }
        
        .form-signin {
            width: 100%;
            padding: 15px;
            margin: auto;
        }
        
        @media (min-width: 768px) {
            .form-signin {
                max-width: 600px;
            }
        }
        
        .form-signin .card {
            box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
            border-radius: 10px;
        }
        
        .form-signin .card-header {
            text-align: center;
            border-radius: 10px 10px 0 0 !important;
            color: #fff;
        }
        
        .form-signin .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 10px;
            font-size: 16px;
        }
        
        .form-signin .form-control:focus {
            z-index: 2;
        }
        
        .form-signin input[type="text"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }
        
        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        
        .bg-gradient-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        }
    </style>
</head>
<body>
    <div class="form-signin w-100 d-flex flex-column min-vh-100">
        <div class="row justify-content-center position-relative" style="z-index: 1;">
            <div class="col-12">
                <div class="card border-0 shadow-lg mt-5 mb-5" style="border-radius: 25px; overflow: hidden; background-color: rgba(255, 255, 255, 0.85);">
                    <div class="card-body p-5">
                        <div class="text-center mb-5">
                            <div class="mb-4">
                                <div class="bg-gradient-primary rounded-circle mx-auto d-flex align-items-center justify-content-center" 
                                     style="width: 90px; height: 90px; box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);">
                                    <i class="fas fa-user-lock text-white" style="font-size: 2.8rem;"></i>
                                </div>
                            </div>
                            <h2 class="h3 fw-bold text-dark mb-2">欢迎回来</h2>
                            <p class="text-muted mb-4">请登录您的账户</p>
                        </div>
                        
                        {% if messages %}
                            {% for message in messages %}
                                <div class="alert alert-{{ message.tags }} alert-dismissible fade show rounded-pill px-4 py-3 mb-4 shadow-sm" role="alert">
                                    <i class="fas fa-info-circle me-2"></i>{{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            {% endfor %}
                        {% endif %}
                        
                        <form method="post" class="text-start">
                            {% csrf_token %}
                            <div class="mb-4">
                                <label for="username" class="form-label fw-semibold text-dark mb-2">
                                    <i class="fas fa-user me-2 text-primary"></i>用户名
                                </label>
                                <div class="input-group">
                                    <input type="text" 
                                           class="form-control form-control-lg border-0 py-3 shadow-sm" 
                                           id="username" 
                                           name="username" 
                                           placeholder="请输入用户名" 
                                           required 
                                           style="border-radius: 15px; background-color: #f8f9fa;">
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <label for="password" class="form-label fw-semibold text-dark mb-2">
                                    <i class="fas fa-lock me-2 text-primary"></i>密码
                                </label>
                                <div class="input-group">
                                    <input type="password" 
                                           class="form-control form-control-lg border-0 py-3 shadow-sm" 
                                           id="password" 
                                           name="password" 
                                           placeholder="请输入密码" 
                                           required 
                                           style="border-radius: 15px; background-color: #f8f9fa;">
                                </div>
                            </div>
                            
                            <div class="d-grid mt-5">
                                <button type="submit" 
                                        class="btn btn-primary btn-lg py-3 rounded-pill fw-semibold shadow-lg" 
                                        style="letter-spacing: 1px; transition: all 0.3s;">
                                    <i class="fas fa-sign-in-alt me-2"></i>登录
                                </button>
                            </div>
                        </form>
                    </div>
                    
                    <div class="card-footer border-0 text-center py-4">
                        <p class="mb-0 text-muted">
                            没有账户? 
                            <a href="{% url 'accounts:register' %}" class="text-decoration-none fw-bold text-primary">
                                立即注册
                            </a>
                        </p>
                    </div>
                </div>
                
                <div class="text-center mb-4">
                    <p class="text-white mb-0" style="text-shadow: 0 2px 4px rgba(0,0,0,0.1); font-weight: 500;">
                        &copy; 2025 RBAC权限管理系统
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 在页面加载完成后，如果有CSRF token错误，重新加载页面
        document.addEventListener('DOMContentLoaded', function() {
            // 检查是否有CSRF token错误消息
            const errorAlerts = document.querySelectorAll('.alert-danger');
            let hasCSRFError = false;
            
            errorAlerts.forEach(function(alert) {
                if (alert.textContent.includes('CSRF')) {
                    hasCSRFError = true;
                }
            });
            
            // 如果有CSRF错误，重新加载页面
            if (hasCSRFError) {
                setTimeout(function() {
                    location.reload();
                }, 1000);
            }
        });
    </script>
</body>
</html>